<template>
	<view class="container">
		<view class="ul">
			<view class="li" v-for="item,index in user_list" :key="index">
				<uni-row>
					<uni-col :span="4" class="le">昵称</uni-col>
					<uni-col :span="20" class="ri">{{item.username}}</uni-col>
				</uni-row>
				<uni-row v-if="item.role_name">
					<uni-col :span="4" class="le">角色</uni-col>
					<uni-col :span="20" class="ri">{{item.role_name}}</uni-col>
				</uni-row>
				<uni-row>
					<uni-col :span="4" class="le">积分</uni-col>
					<uni-col :span="20"  class="ri">{{item.jifen_num}}</uni-col>
				</uni-row>
				<view class="btn_view">
					 <button class="del" @click="del_user(item._id,item._wxopenid)">删除</button>
					 <button class="btn" @click="set_roles(item._id)">设置角色</button>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="box">
				<view>
					<view>
						<uni-row style="display: flex;align-items: center;">
							<uni-col :span="8">角色名称</uni-col>
							<uni-col :span="16">
								<w-select v-model='role_id' @change="role_change"
								    :list='roles_List' valueName='role_name' filterable
									defaultValue="请选择角色" showClose keyName="_id">
								</w-select>
							</uni-col>
						</uni-row>
					</view>
				</view>
		
				<view class="btns">
					<button class="le" @click="close">取消</button>
					<button class="ri" @click="click_true">确定</button>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_list: [],
				roles_List:[],
				role_id:'',
				role_name:'',
				user_id:""
			}
		},
		onShow() {
			this.get_list()
			console.log(this.$store.state)
		},
		methods: {
			role_change(e){
				this.role_name=e.role_name
				console.log(e)
			},
			close(){
				this.$refs.popup.close()
			},
			click_true(){
				uni.showLoading({
					title:'加载中~'
				})
				console.log(this.role_id,'eee')
				uniCloud.callFunction({
					name:'setUser',
					data:{
						_id:this.user_id,
						role_id:this.role_id
					}
				}).then(res=>{
					this.role_id=''
					this.user_id=''
					this.role_name=''
					uni.hideLoading()
					this.$refs.popup.close()
					console.log(res)
				})
			},
			set_roles(id){
				this.user_id=id
				this.$refs.popup.open('center')
				const db = uniCloud.database();
				db.collection('uni-id-roles').get().then(res=>{
					console.log(res)
					this.roles_List=res.result.data
				})
			},
			get_list() {
				const db = uniCloud.database();
				db.collection('user-list').get().then(res => {
					console.log(res)
					this.user_list = res.result.data
				})
			},
			del_user(id,openid){
				uni.showModal({
					title: '警告!',
					content: '此操作不可逆.,将彻底清除所有记录!',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							const db = uniCloud.database();
							// db.collection('user-list').doc(id).remove();
							db.collection('jifen_record').where({
							 _wxopenid:openid
							}).remove()
							this.get_list()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.ul .li {
		background: #f5f5f5;
		padding: 20rpx;
		box-sizing: border-box;
		margin-top:5px;
		border-radius: 10rpx;
		color: #333;
		box-shadow: 1px 1px 3px 1px #333;
	}
	.ul .li .uni-row {
		margin-top: 10px
	}
	
	.ul .li .uni-row .le{
		font-weight:bold;
	}
	
	.ul .li .btn_view{
		display: flex;
		align-items: center;
		justify-content:flex-start;
		margin-top: 15px;
		
	}
	
	.ul .li .btn_view button{
		width: fit-content;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
		color: #fff;
	}
	
	.del{
		background: #b41a43;
	}
	.btn{
		background: #2873b9;
	}
	
	.box {
		width: 600rpx;
		margin: 0 auto;
		background: #fff;
		padding: 25rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	
	.box .uni-row {
		margin-top: 15rpx;
	}
	
	.box input {
		border: 1px solid #7a2323;
		height: 66rpx;
		line-height: 66rpx;
		padding: 10rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		color: #7a2323;
		font-size: 30rpx;
	}
	
	.box .btns {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 80rpx;
	}
	
	
	.box .btns button {
		padding:5rpx 30rpx;
		box-sizing: border-box;
		background: #2873b9;
		font-size:24rpx;
		text-align: center;
		color: #fff;
	}
	
	.box .btns button.le {
		background: #2873b9;
	}
	
</style>